<template>
  <div>
    <div class="search" ref="posotional">
      <div class="option1">
        <span>应聘职位:</span>
        <select name="请选择" id="" v-model="washPosition">
          <option value="互联网">互联网</option>
        </select>
      </div>
      <div class="option2">
        <span>更新时间</span>
        <select name="请选择" id="" v-model="degree">
          <option value="是">是</option>
        </select>
      </div>
      <div class="input">
        <span style="line-height: 30px">姓名</span>
        <a-input-search
          placeholder="zhangsan"
          style="width: 160px"
          @search="onSearch"
          v-model="name"
        />
      </div>
    </div>
    <!-- 表格 -->
    <div class="table">
      <a-table
        :columns="columns"
        :data-source="data"
        bordered
        style="padding-top: 5px"
      >
        <template
          v-for="col in ['name', 'age', 'address', 'isUser']"
          :slot="col"
          slot-scope="text, record"
        >
          <div :key="col">
            <a-input
              v-if="record.editable"
              style="margin: -5px 0"
              :value="text"
              @change="(e) => handleChange(e.target.value, record.key, col)"
            />
            <!-- 插入信息 -->
            <template v-else>
              {{ text }}
            </template>
          </div>
        </template>
        <template slot="operation" slot-scope="text, record">
          <div class="editable-row-operations" style="height: 25px">
            <span v-if="record.editable">
              <a @click="() => save(record.key)">修改成功</a>
              <a-popconfirm
                title="是否修改?"
                @confirm="() => cancel(record.key)"
              >
                <a>是否修改</a>
              </a-popconfirm>
            </span>
            <span v-else>
              <router-link to="/complain/Detail" style="color: #37cfb1"
                >详情</router-link
              >
            </span>
          </div>
        </template>
      </a-table>
    </div>
  </div>
</template>

<script>
// import { CheckOutlined, CloseOutlined } from '@ant-design/icons-vue';
const columns = [
  {
    title: "头像",
    dataIndex: "header",
    width: "10%",
    scopedSlots: { customRender: "name" },
  },
  {
    title: "姓名",
    dataIndex: "companName",
    width: "10%",
    scopedSlots: { customRender: "age" },
  },
  {
    title: "职位发布人",
    dataIndex: "postPublisher",
    width: "8%",
    scopedSlots: { customRender: "address" },
  },
  {
    title: "职位",
    dataIndex: "position",
    width: "8%",
    scopedSlots: { customRender: "address" },
  },
  {
    title: "行业",
    dataIndex: "industry",
    width: "10%",
    scopedSlots: { customRender: "address" },
  },
  {
    title: "注册时间",
    dataIndex: "registerTime",
    width: "10%",
    scopedSlots: { customRender: "address" },
  },
  {
    title: "最近登录时间",
    dataIndex: "recentLoginTime",
    width: "10%",
    scopedSlots: { customRender: "address" },
  },
  {
    title: "在招岗位",
    dataIndex: "id",
    width: "5%",
    scopedSlots: { customRender: "address" },
  },
  {
    title: "岗位审核",
    dataIndex: "needCheck",
    width: "8%",
    scopedSlots: { customRender: "needCheck" },
  },
  {
    title: "启用/禁用",
    dataIndex: "isUser",
    width: "8%",
    scopedSlots: { customRender: "isUser" },
  },
  {
    title: "操作",
    dataIndex: "operation",
    scopedSlots: { customRender: "operation" },
  },
];

const data = [];

export default {
  data() {
    this.cacheData = data.map((item) => ({ ...item }));
    return {
      data,
      columns,
      editingKey: "",
      washPosition: "互联网",
      degree: "是",
      checked1: "false",
      name: "一程文化公司",
    };
  },
  mounted() {
    this.$axios
      .post("/getcompanyinfo", {})
      .then((res) => {
        console.log(res.data.data);
        // 获取数据
        if (data.includes("图片0")) {
          console.log(data);
        }else{
          for (let i = 0; i < 100; i++) {
            data.push({
              key: i.toString(),
              header: `图片${i}`,
              avatar: res.data.data[i].info.avatar,
              companName: res.data.data[i].info.companName,
              hotCompany: res.data.data[i].info.hotCompany,
              id: res.data.data[i].info.id,
              recentLoginTime: res.data.data[i].info.recentLoginTime,
              registerTime: res.data.data[i].info.registerTime,
              isUse: res.data.data[i].info.isUse,
              position: res.data.data[i].info.position,
              postPublisher: res.data.data[i].info.postPublisher,
              industry: res.data.data[i].info.industry,
            });
          }
        }
      })
      .catch((err) => {
        console.error(err);
      });
    // console.log(data);
  },
  methods: {
    handleChange(value, key, column) {
      const newData = [...this.data];
      const target = newData.find((item) => key === item.key);
      if (target) {
        target[column] = value;
        this.data = newData;
      }
    },
    edit(key) {
      const newData = [...this.data];
      const target = newData.find((item) => key === item.key);
      this.editingKey = key;
      if (target) {
        target.editable = true;
        this.data = newData;
      }
    },
    save(key) {
      const newData = [...this.data];
      const newCacheData = [...this.cacheData];
      const target = newData.find((item) => key === item.key);
      const targetCache = newCacheData.find((item) => key === item.key);
      if (target && targetCache) {
        delete target.editable;
        this.data = newData;
        Object.assign(targetCache, target);
        this.cacheData = newCacheData;
      }
      this.editingKey = "";
    },
    cancel(key) {
      const newData = [...this.data];
      const target = newData.find((item) => key === item.key);
      this.editingKey = "";
      if (target) {
        Object.assign(
          target,
          this.cacheData.find((item) => key === item.key)
        );
        delete target.editable;
        this.data = newData;
      }
    },
  },
  setup() {
    const checked = false;
    return {
      checked,
    };
  },
};
</script>

<style>
body {
  background-color: #f7fffd;
}
.search {
  display: flex;
}

select {
  /* margin-top: 122px; */
  margin-right: 40px;
  width: 160px;
  height: 30px;
  line-height: 20px;
  color: rgba(16, 16, 16, 100);
  font-size: 14px;
  font-family: Microsoft Yahei;
  border: 1px solid rgba(187, 187, 187, 100);
}

.input {
  display: flex;
  /* margin-top: 122px; */
  margin-left: 120px;
  width: 350px;
  height: 30px;
  line-height: 20px;
  color: rgba(16, 16, 16, 100);
  font-size: 14px;
  font-family: Microsoft Yahei;
}
.option1 span {
  margin: 0 20px 0 150px;
}

.search span {
  margin-right: 20px;
  color: rgba(16, 16, 16, 100);
  font-size: 16px;
  text-align: left;
  font-family: SourceHanSansSC-regular;
}

.editable-row-operations a {
  margin-right: 8px;
}
</style>